<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ fromData?.val?.distributeInfoDetail?.distributeName }}
          </span>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px" />
    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" label-position="left" size="small" class="filter-form-inline">
          <el-row :gutter="40">
            <el-col :lg="8" :xs="4">
              <el-form-item label="产品名称：">
                <span v-if="fromData?.val?.productInfoDetail?.productPopularName">
                  {{ fromData?.val?.productInfoDetail?.productPopularName }}-</span>
                <span v-if="fromData?.val?.productInfoDetail?.productName">
                  {{ fromData?.val?.productInfoDetail?.productName }}-</span>
                <span> {{ fromData?.val?.productInfoDetail?.packSpecs }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="批准文号：">
                {{ fromData?.val?.productInfoDetail?.approvalNumber }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="包装规格：">
                {{ fromData?.val?.productInfoDetail?.packSpecs }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <table-view header-cell-class-name="table-header" :data="tableData" border>
          <el-table-column label="序号" type="index" width="50" align="center" />
          <el-table-column label="记录时间" prop="index" align="center">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd HH:MM:SS",row?.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="业务类型" prop="index" align="center">
            <template #default="{row}">
              <span v-if="row.drpType ==='receive'">发货</span>
              <span v-if="row.drpType === 'out'">配送</span>
            </template>
          </el-table-column>
          <el-table-column label="数量(盒)" prop="amount" align="center" />
          <el-table-column label="库存结余(元)" prop="remainStock" align="center" />
          <el-table-column label="关联单据编号" prop="relationNumber" align="center" />
          <el-table-column label="操作人" prop="creatorName" align="center">
            <template #default="{row}">
              <span>{{ row.creatorName }}</span>
              <span>[{{ row.departmentName }}}]</span>
            </template>
          </el-table-column>
        </table-view>
      </div>
    </div>

  </div>
</template>

<script>
import {inject, onMounted, reactive, toRefs,} from 'vue'
import {useRoute, useRouter} from 'vue-router'

export default {
  name: 'Index',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const api = inject('api')
    const data = reactive({
      fromData: {
        val: JSON.parse(route.query.row),
      },
      tableData: [],
      obj: {
        productId: Number(route.query.ids),
        distributeId: Number(route.query.id),
      },
    })
    const handlBack = () => {
      router.go(-1)
    }

    const handlDetails = () => {
      api.stockSellStorage.STOCKSELLSTORAGE_DETAILS(data.obj).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list
        }
      })
    }

    onMounted(() => {
      handlDetails()
    })

    return {
      ...toRefs(data),
      handlBack,
      handlDetails,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
